<template>
	<view class="custom-tab-bar">
		<!-- tabBar 按钮 -->
		<view class="tab-bar-items">
			<view v-for="(item, index) in tabList" :key="index" class="tab-bar-item" @click="switchTab(item.pagePath)">
				<image :src="current === item.pagePath ? item.selectedIconPath : item.iconPath" class="tab-bar-icon"
					alt="tabbar icon"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	export default defineComponent({
		name: 'CustomTabBar',
		setup() {
			const tabList = [
				{
					pagePath: 'pages/home/home',
					iconPath: '/static/icon/home2.png',
					selectedIconPath: '/static/icon/home1.png',
				},
				{
					pagePath: 'pages/popular/popular',
					iconPath: '/static/icon/gift2.png',
					selectedIconPath: '/static/icon/gift1.png',
				},
				{
					pagePath: 'pages/create/create',
					iconPath: '/static/icon/create.png',
				},
				{
					pagePath: 'pages/smartPlay/smartPlay',
					iconPath: '/static/icon/bear2.png',
					selectedIconPath: '/static/icon/bear1.png',
				},
				{
					pagePath: 'pages/mine/mine',
					iconPath: '/static/icon/person2.png',
					selectedIconPath: '/static/icon/person1.png',
				}
			];

			const current = ref('');

			onLoad(() => {
				// 获取当前页面路径
				const pages = getCurrentPages();
				if (pages.length > 0) {
					current.value = pages[pages.length - 1].route;
				}
			});

			const switchTab = (path : string) => {
				uni.switchTab({ url: `/${path}` });
			};

			return {
				tabList,
				current,
				switchTab
			};
		}
	});
</script>

<style lang="less">
	.custom-tab-bar {
		width: 100%;
		pointer-events: auto;
		position: fixed;
		bottom: 0.5rem;
		left: 0rem;
		right: 0;
		height: 50px;
		/* 根据需要调整高度 */
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 999;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: 102%;
		.tab-bar-items {
			display: flex;
			width: 100%;
			justify-content: space-around;
			z-index: 2;
		}

		.tab-bar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			color: #7A7E83;
		}

		.tab-bar-icon {
			width: 24px;
			height: 24px;
			margin-left: 25rpx;
		}

		.tab-bar-text {
			font-size: 12px;

			&.active {
				color: #007AFF;
			}
		}
	}

	.tab-bar-item:nth-child(3) {
		width: 3.94rem;
		height: 2.56rem;
		margin-top: 0.05rem; // 可根据需求调整向上偏移量
		padding: 0;
	}

	.tab-bar-item:nth-child(3) .tab-bar-icon {
		width: 3.94rem;
		height: 2.56rem; // 可根据需求调整图标高度
		margin-left: 0; // 重置图标左边距
	}
</style>